<template>
    <div>
        <div id="container" style="width: 100%;height: 300px;position: fixed;z-index: 999">
        </div>
        <div style="width: 100%;position: absolute;top: 342px;margin-bottom: 60px">
            <el-card v-for="parking in parkingList" :key="parking.id">
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <h3>{{parking.parkingName}}</h3>
                    <h5 style="color: cornflowerblue">{{parking.parkingStatusCode | StatusFilter}}</h5>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <span style="font-size: 12px">距离{{(parking.distance/10000)<1?(parking.distance/10+"米"):(parking.distance/10000+"千米")}}</span>
                    <div>
                        <el-button size="small" circle icon="el-icon-s-promotion" type="primary"  @click="chooseParking(parking.longitude,parking.latitude)"></el-button>
                        <el-button size="small" circle icon="el-icon-phone" type="danger"  @click="sendOrder(parking)"></el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <el-dialog  title="提交预定订单"
                    :visible.sync="popupVisible"
                    width="80%"
                    :before-close="handleClose">
            <div style="display: flex;flex-direction: column;align-items: center">
                <el-form :model="orderForm" label-width="20%" label-position="left">
                    <el-form-item label="车库">
                        <el-input size="small" v-model="orderForm.parking" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="车位">
                        <el-select size="small" v-model="orderForm.carPlaceId" :value="orderForm.carPlaceId" @change="getRule(orderForm.carPlaceId)">
                            <el-option  v-for="item in carPlaceOption"
                                        :key="item.id"
                                        :label="'编号：'+item.id"
                                        :value="item.id">
                                    <span style="float: left">编号：{{ item.id }}</span>
                                    <span style="color: rgb(132, 146, 166);font-size: 13px;margin-left: 9px;">{{ item.payRulesId | ruleFilter}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收费">
                        <el-input size="small" v-model="orderForm.ruleCode" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="车牌">
                        <el-select size="small" v-model="orderForm.plateNum" :value="orderForm.plateNum">
                            <el-option
                                v-for="item in carNumOption"
                                :key="item.id"
                                :label="item.plateNum"
                                :value="item.plateNum"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <span>开始时间:{{new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate()+"  "+new Date().getHours()+":"+new Date().getMinutes()}}</span>
                    <el-form-item label-width="35%">
                        <template>
                            <el-button circle type="primary" style="width: 60px;height: 60px;margin-top: 10px" @click="sendOrderForm">
                                <i style="font-size: 21px" class="el-icon-s-promotion"></i> <br>
                                <span>预定</span>
                            </el-button>
                        </template>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    const AMap = window.AMap;
    let map;
    import Filter from '../../utils/filter'
    import { MessageBox,Toast } from 'mint-ui';
    export default {
        data(){
            return{
                parkingList:[],
                currentPoint:[],
                popupVisible:false,
                orderForm:{},
                user: JSON.parse(localStorage.getItem("user")),
                carPlaceOption:[],
                carNumOption:[],
                ruleCode:""
            }
        },
        methods:{
            mapLoad() {
                let self = this;
                map = new AMap.Map("container", {
                    zoom: 15,
                    pitch: 0,
                    viewMode: '2D',
                    resizeEnable: true
                });
                AMap.plugin('AMap.Geolocation', function() {
                    let geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位，默认:true
                        timeout: 10000,          //超过10秒后停止定位，默认：5s
                        buttonPosition:'RB',    //定位按钮的停靠位置
                        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

                    });
                    map.addControl(geolocation);
                    geolocation.getCurrentPosition(function(status,result){
                        if(status ==='complete'){
                            self.onComplete(result)
                        }else{
                            self.onError(result)
                        }
                    });
                });
            },
            //解析定位结果
            onComplete(data) {
                this.currentPoint = data.position;
                let param = [data.position.lat,data.position.lng];
                this.getAllParking(param)

            },
            //解析定位错误信息
            onError(data) {
                MessageBox.alert("定位失败:"+data.message);
            },
            chooseParking(lng,lat){
               map.setCenter([lng,lat]);
            },
            sendOrder(data){
                this.popupVisible = true;
                this.getCarPlaceOption(data.id);
                this.getCarNumOption();
                this.orderForm = {
                    parking:data.parkingName,
                    parkingId:data.id,
                    carPlaceId:"",
                    plateNum:"",
                    userName: this.user.userName,
                    userId: this.user.id
                }
            },
            sendOrderForm(){
                if (this.orderForm.plateNum === "" || this.orderForm.carPlaceId === "" ){
                    this.popupVisible = false;
                    Toast({
                        message: '请选择车牌或者车位',
                        iconClass: 'el-icon-close'
                    });
                }else {
                    this.$http.get("/parkingOrder/judgePlateNumStatus/"+this.orderForm.plateNum).then(res=>{
                        if (res.status===200){
                            if(res.data.code==="1"){
                                this.popupVisible = false;
                                Toast({
                                    message: res.data.message,
                                    iconClass: 'el-icon-close'
                                });
                            }else{
                                this.$http.post("/parkingOrder/add",this.orderForm).then(res=>{
                                    if (res.status===200){
                                        Toast({
                                            message: '预定成功!',
                                            iconClass: 'el-icon-check'
                                        });
                                        this.popupVisible = false;
                                    }
                                })
                            }
                        }
                    })
                }
            },
            handleClose(){
                this.popupVisible = false;
            },
            getCarPlaceOption(data){
                this.$http.get("/carPlace/getCarPlaceByParkingId/"+data).then(res=>{
                    if (res.status===200){
                        this.carPlaceOption = res.data;
                    }
                });
            },
            getCarNumOption(){
                let user = JSON.parse(localStorage.getItem("user"));
                this.$http.post("/userPlateBind/page",{
                    pageSize:10,
                    pageNum:1,
                    clauses:[
                        {
                            column:"userId",
                            operation:"=",
                            value:user.id
                        }
                    ]
                }).then(res=>{
                    if (res.status===200){
                        this.carNumOption = res.data.list;
                    }
                })
            },
            getAllParking(point){
                let startIcon = new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(25, 25),
                    // 图标的取图地址
                    image:require('../../assets/stopIcon.png'),
                    // 图标所用图片大小
                    imageSize: new AMap.Size(25, 25),
                });
                this.$http.post("/parking/getRelativeParking",point).then(res=>{
                    if (res.status===200){
                        this.parkingList = res.data;
                        this.parkingList.forEach(v => {
                            let marker = new AMap.Marker({
                                position: new AMap.LngLat(v.longitude, v.latitude),
                                icon:startIcon
                            });
                            map.add(marker);
                        })
                    }
                })
            },
              getRule(data){
                this.$http.get("/carPlace/get/"+data).then(res =>{
                  if (res.status === 200){
                    this.$http.get("/payRules/get/"+res.data.payRulesId).then(res =>{
                      if (res.status === 200){
                        this.orderForm.ruleCode = res.data.payRule;
                      }
                    })
                  }
                })
              }
        },
        mounted(){
            this.mapLoad();
        },
        filters:{
            StatusFilter:function (data) {
                return Filter.CodeFilter(data)
            },
            CodeFilter: function (data) {
               return Filter.CodeFilter(data)
            },
            ruleFilter:function (data) {
              return Filter.PayRulerFilter(data);
            }
        }
    }
</script>

<style scoped>

</style>